<template>
	<div></div>
	</template>
	
	<script setup>
	import * as THREE from 'three';
	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	
	//创建场景
	const scene = new THREE.Scene();
	//创建相机
	const camera = new THREE.PerspectiveCamera();
	camera.position.y = 5
	camera.position.z = 10
	
	
	const geometry = new THREE.BufferGeometry();
    //创建一个简单的矩形，在这里我们你左上和右下顶点被复制了两次
	//因为在两个三角面皮里，这两个顶点都需要被用到
	const vertices = new Float32Array([
	-1.0,-1.0,1.0,
	1.0,-1.0,1.0,
	1.0,1.0,1.0,
	//1.0,1.0,1.0,
	-1.0,1.0,1.0,
	//-1.0,-1.0,1.0,
	])

	//itemSize = 3 因为每个顶点都是一个三元组
	geometry.setAttribute("position",new THREE.BufferAttribute(vertices,3));

	//数组索引的方式确定坐标
	const indexs = new Uint16Array([
	0,1,2,2,3,0
	])

	geometry.index = new THREE.BufferAttribute(indexs,1)

	//渲染两个面  
	const material = new THREE.MeshBasicMaterial({
		color : 0xff0000,
		side : THREE.DoubleSide
	})
	
	//网格
	const cube = new THREE.Mesh(geometry,material);
	cube.position.set(0,3,0)
	scene.add(cube);
	
	//添加网格地面
	const gridHelper = new THREE.GridHelper(10,10);
	scene.add(gridHelper);
	
	//创建渲染器
	const renderer = new THREE.WebGLRenderer()
	document.body.appendChild(renderer.domElement)
	//调整渲染器窗口大小
	renderer.setSize(window.innerWidth,window.innerHeight);
	
	//添加轨道控制器
	const controls = new OrbitControls(camera,renderer.domElement)
	//对轨道控制器改变时候监听
	controls.addEventListener('change',function() {
		console.log('触发change');
	})
	


	//renderer.render(scene,camera);
	
	
	function animate(){
		//告诉浏览器你希望执行一个动画
		requestAnimationFrame( animate);

		//轨道控制器更新
		controls.update();
		renderer.render(scene,camera);
	}
	animate();
	</script>
	
	<style>
	
	
	</style>
	